<template>
	<div class="city-head">
		<view class="block_1 uni-flex uni-justify-between">
			<view class="uni-flex uni-justify-between" @click="openCity">
				<text class="text-group_1">{{ address || '选择地区' }}</text>
				<image class="block_1_img" :src="`${$ImgBaseUrl}select_black.png`" mode="scaleToFill" />
			</view>
			<view class="uni-flex uni-justify-between">
				<image class="label_img" referrerpolicy="no-referrer" :src="`${$ImgBaseUrl}help.png`" />
				<image class="label_img" referrerpolicy="no-referrer" :src="`${$ImgBaseUrl}listen.png`" />
				<image class="label_img" referrerpolicy="no-referrer" :src="`${$ImgBaseUrl}info.png`"
					@click="openInfo" />
			</view>
		</view>
	</div>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		onMounted,
		onUnmounted
	} from 'vue';

	const state = reactive({
		address: '选择地区',
	});
	const {
		address
	} = toRefs(state);
	// 安全的地址拼接函数
	const buildAddressString = (parts) => {
		return parts.filter(part => part && part !== 'undefined').join('·');
	};
	// 提取地址设置逻辑为独立函数
	const setAddress = () => {
		try {
			// 优先获取用户选择的地址
			const selectLocation = uni.getStorageSync('select_location');
			if (selectLocation) {
				const select = JSON.parse(selectLocation);

				// 构建地址部分数组
				const addressParts = [];
				if (select.provinceName) addressParts.push(select.provinceName);
				if (select.cityName) addressParts.push(select.cityName);
				if (select.areaName && select.areaName !== select.cityName) {
					addressParts.push(select.areaName);
				}

				if (addressParts.length > 0) {
					address.value = buildAddressString(addressParts);
					return;
				}
			}

			// 其次获取当前定位地址
			const currentLocation = uni.getStorageSync('current_location');
			if (currentLocation) {
				const current = JSON.parse(currentLocation);
				const addressParts = [];
				if (current.provinceName) addressParts.push(current.provinceName);
				if (current.cityName) addressParts.push(current.cityName);
				if (current.areaName && current.areaName !== current.cityName) {
					addressParts.push(current.areaName);
				}

				if (addressParts.length > 0) {
					address.value = buildAddressString(addressParts);
					return;
				}
			}

			// 默认地址
			address.value = '选择地区';
		} catch (e) {
			console.error('解析地址失败:', e);
			address.value = '选择地区';
		}
	};

	// 监听区域变更事件
	const handleAreaChange = () => {
		setAddress(); // 地址变更时重新设置
	};

	const openCity = () => {
		uni.navigateTo({
			url: "/pages/tabBars/selectAddress/selectAddress",
		});
	};

	const openInfo = () => {
		uni.navigateTo({
			url: "/pages/chat/list/index",
		});
	};

	// 组件挂载时初始化并监听事件
	onMounted(() => {
		setAddress(); // 初始加载地址
		// 确保事件唯一监听
		uni.$off('areaSelected', handleAreaChange);
		uni.$on('areaSelected', handleAreaChange);
	});

	// 组件卸载时移除监听，避免内存泄漏
	onUnmounted(() => {
		uni.$off('areaSelected', handleAreaChange);
	});
</script>

<style lang="scss" scoped>
	.block_1 {
		margin: 40rpx 24rpx 24rpx;

		.text-group_1 {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			margin-right: 8rpx; // 增加间距，避免文字与图标重叠
		}

		.block_1_img {
			width: 22rpx;
			height: 22rpx;
			margin-top: 8rpx;
		}

		.label_img {
			width: 44rpx;
			height: 44rpx;
			margin-right: 16rpx;

			&:last-child {
				margin-right: 0; // 最后一个图标无右间距
			}
		}
	}
</style>